{include file="public/header-static"/}
{include file="public/sidebar"/}

<!-- Style -->
<link rel="stylesheet" href="__STATIC__/vendors/select2/css/select2.min.css" type="text/css">

<!-- Style -->
<link rel="stylesheet" href="__STATIC__/vendors/tagsinput/bootstrap-tagsinput.css" type="text/css">

<!-- Css -->
<link rel="stylesheet" href="__STATIC__/vendors/datepicker/daterangepicker.css" type="text/css">

<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            {include file="public/page-header"/}
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{:url($kplurl["edit"])}" method="post" target="iframe_form" enctype="multipart/form-data">
                            <input type="hidden" name="id" value="<?php echo input('id'); ?>">
                            {volist name="data" id="data"}
                            <div class="form-group">
                                <label for="kplphp_{$key}">{$data['title']}</label>
                                {if $data['type'] == 'text' || $data['type'] == 'password'}
                                <input id="kplphp_{$key}" name="{$data['field']}" {if !empty($data['disabled'])} disabled="disabled" {/if}  type="{$data['type']}" value="{$data['value']}" class="form-control" placeholder="{if !empty($data['placeholder'])}{$data['placeholder']}{else /} {$data['title']}  {/if} ">
                                {elseif $data['type'] == 'switch' /}
                                <div class="form-group">
                                    <div class="custom-control  custom-switch custom-checkbox-secondary">
                                        <input type="checkbox" id="{$data['field']}_ksetarr_{$key}" name="{$data['field']}" class="custom-control-input" {if !empty($data['disabled'])} disabled="disabled" {/if} {if $data['value'] == 1} checked {/if}>
                                        <label class="custom-control-label" for="{$data['field']}_ksetarr_{$key}">  </label>
                                    </div>
                                </div>
                                {elseif $data['type'] == 'select' /}
                                <div class="form-group">
                                    <select id="kplphp_{$key}" name="{$data['field']}" class="custom-select">
                                        {volist name="data['setarr']" id="setarr"}
                                        <option value="{$key}">{$setarr}</option>
                                        {/volist}
                                    </select>
                                </div>
                                {elseif $data['type'] == 'select2' /}
                                <div class="form-group">
                                    <select id="kplphp_{$key}" name="{$data['field']}" class="custom-select select2-example">
                                        {volist name="data['setarr']" id="setarr"}
                                        <option value="{$key}" {if !empty($data['disabled'])} disabled="disabled" {/if} {if $data['value'] == $key} selected {/if}>{$setarr}</option>
                                        {/volist}
                                    </select>
                                </div>
                                {elseif $data['type'] == 'multiple_use' /}
                                <div class="form-group">
                                    <select id="kplphp_{$key}" name="{$data['field']}" class="custom-select select2-example" multiple>
                                        {volist name="data['setarr']" id="setarr"}
                                        <option  value="{$key}" {if !empty($data['disabled'])} disabled="disabled" {/if} {if $data['value'] == $key} selected {/if}>{$setarr}</option>
                                        {/volist}
                                    </select>
                                </div>
                                {elseif $data['type'] == 'checkboxs' /}
                                <div class="form-group">
                                    {volist name="data['setarr']" id="setarr"}
                                    <div class="custom-control {$data['inline-css']} custom-checkbox custom-checkbox-secondary">
                                        <input type="checkbox" name="{$data['field']}" value="{$key}" class="custom-control-input" id="customCheck{$key}" {if !empty($data['disabled'])} disabled="disabled" {/if} {if $data['value'] == $key} checked {/if}>
                                        <label class="custom-control-label" for="customCheck{$key}">{$setarr}</label>
                                    </div>
                                    {/volist}
                                </div>
                                {elseif $data['type'] == 'radio' /}
                                <div class="form-group">
                                    {volist name="data['setarr']" id="setarr"}
                                    <div class="custom-control {$data['inline-css']} custom-radio  custom-checkbox-secondary">
                                        <input type="radio" id="customRadio{$key}" name="{$data['field']}" class="custom-control-input" value="{$key}" {if !empty($data['disabled'])} disabled="disabled" {/if} {if $data['value'] == $key} checked {/if}>
                                        <label class="custom-control-label" for="customRadio{$key}">{$setarr}</label>
                                    </div>
                                    {/volist}
                                </div>
                                {elseif $data['type'] == 'tags' /}
                                <div class="form-group">
                                    <input type="text" class="form-control tagsinput-example" name="{$data['field']}" placeholder="{$data['placeholder']}" value="{$data['exsetarr']}">
                                </div>
                                {elseif $data['type'] == 'time' /}
                                <div class="form-group">
                                    <input type="text" class="form-control time"  name="{$data['field']}" value="2020-02-08 20:00:00" >
                                </div>
                                {elseif $data['type'] == 'datetime' /}
                                <div class="form-group">
                                    <input type="text" class="form-control datetime"  name="{$data['field']}" value="" >
                                </div>
                                {else /}
                                <h3>其他扩展</h3>
                                {/if}
                                <small class="form-text text-muted">{$data['mean']}</small>
                            </div>
                            {/volist}
                            <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/bundle.js"></script>
<script src="__STATIC__/vendors/prism/prism.js"></script>
<script src="__STATIC__/assets/js/app.min.js"></script>
<script src="__STATIC__/vendors/select2/js/select2.min.js"></script>
<script src="__STATIC__/vendors/tagsinput/bootstrap-tagsinput.js"></script>
<script src="__STATIC__/vendors/datepicker/daterangepicker.js"></script>
<script>
    $('.select2-example').select2({
        placeholder: 'Select'
    });

    $("input.tagsinput-example").tagsinput('items');

    $(".time").daterangepicker(
        {
            drops: 'up',
            singleDatePicker: true,//设置为单个的datepicker，而不是有区间的datepicker 默认false
            showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
            autoUpdateInput: true,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
            timePicker24Hour : true,//设置小时为24小时制 默认false
            timePicker : true,//可选中时分 默认false
            timePickerSeconds: true,
            applyButtonClasses: "btn-secondary",
            cancelClass: "btn-secondary",
            locale: {
                applyLabel: "确认",
                cancelLabel: "清空",
                fromLabel: "开始时间",
                toLabel: "结束时间",
                customRangeLabel: "自定义",
                format: "YYYY-MM-DD HH:MM:SS",
                separator: " - ",
                daysOfWeek: ["日","一","二","三","四","五","六"],
                monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
            }

        }
    ).on('cancel.time', function(ev, picker) {
        $("#date1").val("请选择日期");
        $("#submitDate").val("");
    }).on('apply.time', function(ev, picker) {
        $("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
        $("#date1").val(picker.startDate.format('YYYY-MM-DD'));
    });

    $(".datetime").daterangepicker(
        {
            ranges: {
                '今天': [moment(),moment()],
                '昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
                '近7天': [moment().subtract(7, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            drops: 'up',
            singleDatePicker: false,//设置为单个的datepicker，而不是有区间的datepicker 默认false
            showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
            autoUpdateInput: true,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
            timePicker24Hour : true,//设置小时为24小时制 默认false
            timePicker : true,//可选中时分 默认false
            timePickerSeconds: true,
            applyButtonClasses: "btn-secondary",
            cancelClass: "btn-secondary",
            locale: {
                applyLabel: "确认",
                cancelLabel: "清空",
                fromLabel: "开始时间",
                toLabel: "结束时间",
                customRangeLabel: "自定义",
                format: "YYYY-MM-DD hh:mm ",
                separator: " - ",
                daysOfWeek: ["日","一","二","三","四","五","六"],
                monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
            }

        }
    ).on('cancel.datetime', function(ev, picker) {
        $("#date1").val("请选择日期");
        $("#submitDate").val("");
    }).on('apply.datetime', function(ev, picker) {
        $("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
        $("#date1").val(picker.startDate.format('YYYY-MM-DD'));
    });

</script>